<template>
  <!-- 老师课表 -->
  <view class="time-table flex flex-direction" style="height: 100vh">
    <view class="common-view">
      <view class="common-title"> 常用功能 </view>
      <view class="common-content">
        <view
          class="common-item"
          v-for="item in commonList"
          :key="item.id"
          @click="toPage(item.path)"
        >
          <image class="common-item-image" :src="item.icon" mode=""></image>
          <view class="common-item-text">{{ item.title }}</view>
        </view>
      </view>
    </view>

    <!-- 日历 -->
    <view class="calendar-view">
      <view class="cu-bar bg-white text-primary">
        <view class="action" @click="previousWeek">
          <text class="cuIcon-back" style="margin-right: unset"></text>
          <text class="text-bold text-lg">上一周</text>
        </view>
        <text @click="openCalendar" class="text-bold">{{ time }}</text>
        <view class="action" @click="nextWeek">
          <text class="text-bold text-lg">下一周</text>
          <text class="cuIcon-right"></text>
        </view>
      </view>
      <view class="flex text-center page-bg-white margin-bottom-sm">
        <view
          class="cu-item flex-sub"
          v-for="(item, index) in timeList"
          :key="index"
          @click="tabSelect"
          :data-id="index"
        >
          <view class="margin-tb text-lg" style="color: #b1b1b1">{{
            item.week
          }}</view>
          <view
            class="text-bold text-lg time radio-circle"
            :class="
              index + 1 === week
                ? 'text-white page-bg-primary radio-circle'
                : ''
            "
            >{{ item.time }}</view
          >
          <text
            class="text-gray"
            style="font-size: 80rpx; line-height: 20rpx"
            v-if="index + 1 === week"
            >·</text
          >
        </view>
      </view>
    </view>
    <!-- 列表 -->
    <view class="list-msg">
      <view
        v-for="(item, i) in list"
        :key="i"
        class="list-box"
        @click="listClick(item, i)"
      >
        <view class="list-box-top">
          <view class="list-box-time">
            <uni-icons
              custom-prefix="iconfont"
              type="icon-date"
              size="32"
              color="#FE9053"
            ></uni-icons>
            <text>{{ item.time }}</text>
          </view>
          <!-- <view class="list-box-name"> 课程名称：{{ item.courseName }} </view> -->
        </view>
        <view class="list-box-down">
          <view class="list-box-msg">
            <view>课程：{{ items.courseName }}</view>
            <view>班级：{{ items.className }}</view>
            <view>主带老师：{{ items.teacherName }}</view>
          </view>
        </view>
      </view>
    <!-- <view
      v-for="(item, index) in list"
      :key="index"
      v-if="index + 1 === week"
      class="list-view"
    >
      <view v-for="(items, i) in item" :key="i" v-if="item.length !== 0">
        <view class="cu-card article" :class="isCard ? 'no-card' : ''">
          <view class="cu-item padding-bottom-xs margin-bottom-xs cu-shadow">
            <view class="cu-list menu-avatar">
              <view
                class="cu-item flex justify-between margin-lr text-xl height-50"
              >
                <view class="text-lg">
                  <text class="cuIcon-time text-orange"></text>
                  <text class="margin-lr-xs text-bold">{{ items.time }}</text>
                  <a
                    v-if="items.prepareClass == 0"
                    class="class-button"
                    @click="toPage(`/pages/preparation/index`)"
                    ><uni-icons
                      color="class-icon"
                      type="compose"
                      size="20"
                    ></uni-icons
                    >备课</a
                  >
                  <a
                    v-if="items.prepareClass == 1"
                    class="class-button"
                    @click="toPage(`/pages/preparation/score`)"
                    ><uni-icons
                      color="class-icon"
                      type="compose"
                      size="20"
                    ></uni-icons
                    >填写分数</a
                  >
                </view>
              </view>
            </view>
            <view class="text-lg">
              <view style="height: 60rpx">
                <text class="title padding-right-unset">课程：</text>
                <text>{{ items.courseName }}</text>
                <text class="title padding-right-unset">主带老师：</text>
                <text>{{ items.teacherName }}</text>
              </view>
              <view>
                <text class="title padding-right-unset">班级：</text>
                <text>{{ items.className }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        style="
          display: flex;
          justify-content: center;
          width: 100%;
          align-items: center;
        "
      >
        <image
          src="./not.png"
          mode=""
          v-if="item.length === 0"
          class=""
          style="width: 100px; height: 80px"
        ></image>
      </view>
    </view> -->

    <view>
      <uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
    </view>
  </view>
</template>

<script>
import { formatDayTime, teacherData } from "./home.js";

const oneDayTimeStamp = 86400000; // 一天的时间戳
const now = new Date();
const todayDayTimeStamp = now.getTime(); //今天的时间戳
const day = now.getDay();
const getDay = day === 0 ? 7 : day; // 今天的星期
export default {
  name: "time-table",
  data() {
    return {
      week: getDay, // 今天的星期
      timeList: [
        {
          time: "1",
          week: "一",
        },
        {
          time: "2",
          week: "二",
        },
        {
          time: "3",
          week: "三",
        },
        {
          time: "4",
          week: "四",
        },
        {
          time: "5",
          week: "五",
        },
        {
          time: "6",
          week: "六",
        },
        {
          time: "7",
          week: "日",
        },
      ],
      list: [
        // 一个星期的所有课程
        [
          {
            time: "18:30-19:30",
            courseName: "感统课",
            teacherName: "大力老师",
            prepareClass: 1,
            className: "感统2班",
          },
          {
            time: "14:30-15:30",
            courseName: "学能课",
            teacherName: "小雪老师",
            prepareClass: 0,
            className: "学能1班",
          },
        ],
        [],
        [],
        [],
        [
          {
            time: "16:30-17:30",
            courseName: "学能课",
            teacherName: "小雪老师",
            prepareClass: 0,
            className: "学能1班",
          },
          {
            time: "10:30-11:30",
            courseName: "感统课",
            teacherName: "大力老师",
            prepareClass: 1,
            className: "感统1班",
          },
        ],
        [],
        [],
      ],
      num: 0, // 记录周数，下一周加一，上一周减一, 0:本周
      isCard: false, // 卡片是否铺满全屏
      time: now.toISOString().slice(0, 10),
      mondayDayTimeStamp: 0, // 星期一的时间戳
      sundayDayTimeStamp: 0, // 星期天的时间戳,
      commonList: [
        {
          title: "学员管理",
          icon: "./../../static/images/home/student.png",
          path: `/pages/preparation/index`,
        },
        {
          title: "阶段计划",
          icon: "./../../static/images/home/student-alt.png",
          path: `/pages/stage-plan/index`,
        },
      ],
    };
  },
  onLoad() {
    // 开启跟随系统横竖屏
    /* #ifdef APP-PLUS */
    plus.screen.lockOrientation("default");
    /* #endif */
  },
  onUnload() {
    // 清除跟随系统横竖屏
    /* #ifdef APP-PLUS */
    plus.screen.lockOrientation("portrait-primary");
    /* #endif */
  },
  async created() {
    this.thisWeek(); // 一开始进入页面获取本周的课程表
  },
  methods: {
    //点击周几
    tabSelect(e) {
      this.week = +e.currentTarget.dataset.id + 1;
      this.time = formatDayTime(
        this.mondayDayTimeStamp + oneDayTimeStamp * (this.week - 1)
      );
      console.log("星期" + this.week);
    },
    //点击上一周
    async previousWeek() {
      console.log("上一周");
      this.week = 1;
      this.num = this.num - 1;
      if (this.num === 0) this.num === -1;
      if (this.num >= 0) {
        this.mondayDayTimeStamp =
          todayDayTimeStamp -
          oneDayTimeStamp * (getDay - 1) +
          oneDayTimeStamp * (7 * this.num); // 上星期一的时间戳
        this.sundayDayTimeStamp =
          (7 - getDay) * oneDayTimeStamp +
          todayDayTimeStamp +
          oneDayTimeStamp * (7 * this.num); //上星期天的时间戳
      } else {
        this.mondayDayTimeStamp =
          todayDayTimeStamp -
          oneDayTimeStamp * (getDay - 1) -
          oneDayTimeStamp * (7 * Math.abs(this.num)); // 上星期一的时间戳
        this.sundayDayTimeStamp =
          (7 - getDay) * oneDayTimeStamp +
          todayDayTimeStamp -
          oneDayTimeStamp * (7 * Math.abs(this.num)); //上星期天的时间戳
      }
      this.dayList();
      this.time = formatDayTime(this.mondayDayTimeStamp);
    },
    //点击下一周
    async nextWeek() {
      console.log("下一周");
      this.week = 1;
      this.num = this.num + 1;
      if (this.num === 0) this.num === 1;
      if (this.num <= 0) {
        this.mondayDayTimeStamp =
          todayDayTimeStamp -
          oneDayTimeStamp * (getDay - 1) -
          oneDayTimeStamp * (7 * Math.abs(this.num)); // 下星期一的时间戳
        this.sundayDayTimeStamp =
          (7 - getDay) * oneDayTimeStamp +
          todayDayTimeStamp -
          oneDayTimeStamp * (7 * Math.abs(this.num)); //下星期天的时间戳
      } else {
        this.mondayDayTimeStamp =
          todayDayTimeStamp -
          oneDayTimeStamp * (getDay - 1) +
          oneDayTimeStamp * (7 * this.num); // 下星期一的时间戳
        this.sundayDayTimeStamp =
          (7 - getDay) * oneDayTimeStamp +
          todayDayTimeStamp +
          oneDayTimeStamp * (7 * this.num); //下星期天的时间戳
      }
      this.dayList();
      this.time = formatDayTime(this.mondayDayTimeStamp);
    },
    //获取本周日期
    async thisWeek() {
      this.mondayDayTimeStamp =
        todayDayTimeStamp - oneDayTimeStamp * (getDay - 1); // 星期一的时间戳
      this.sundayDayTimeStamp =
        (7 - getDay) * oneDayTimeStamp + todayDayTimeStamp; //星期天的时间戳
      this.dayList();
    },
    dayList() {
      // 获取本周日期
      for (let i = 0; i < 7; i++) {
        if (this.num === 0) {
          i + 1 === getDay
            ? (this.timeList[i].time = "今")
            : (this.timeList[i].time = +formatDayTime(
                this.mondayDayTimeStamp + i * oneDayTimeStamp
              ).substring(8));
        } else {
          this.timeList[i].time = +formatDayTime(
            this.mondayDayTimeStamp + i * oneDayTimeStamp
          ).substring(8);
        }
      }
    },
    //日历选择某天点击确定
    confirm(e) {
      console.log(e);
      // console.log("今天的星期:",this.mondayDayTimeStamp);
      // console.log("选择的日期:",new Date(e.year,parseInt(e.month)-1,e.date).getTime()/1000);
      let curMongay = this.mondayDayTimeStamp;
      let checkDay = new Date(e.year, parseInt(e.month) - 1, e.date).getTime();
      console.log("相差天数:", checkDay, curMongay);
      let temp = parseInt((checkDay - curMongay) / (24 * 60 * 60 * 1000));
      console.log("相差天数:", temp);
    },
    //点击备课
    toPage(path) {
      this.$tab.navigateTo(path);
    },
    //点击记录分数
    recordScore() {
      console.log("开始记录分数");
    },
    //点击日期，打开日历
    openCalendar() {
      this.$refs.calendar.open();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./css/main.css";
@import "./css/icon.css"; // 图标样式
.time-table {
  margin: 34rpx;
  .content {
    background-color: #ffffff;
  }

  .title {
    line-height: 76rpx !important;
  }
  .time {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin: 0 auto;
  }
}
.class-button {
  color: #409eff;
}
.class-icon {
  color: #409eff;
}
.width-100-bfb {
  width: 100%;
}
.text-primary {
  color: #409eff;
}
.margin-bottom-sm {
  margin-bottom: 20rpx !important;
}
.padding-bottom-xs {
  padding-bottom: 10rpx !important;
}
.margin-bottom-xs {
  margin-bottom: 5px !important;
}
.cu-shadow {
  box-shadow: rgba(43, 111, 179, 0.15) 0px 0px 8px 0px;
}
.height-50 {
  height: 100rpx !important;
}
.padding-right-unset {
  padding-right: unset !important;
}
.radio-circle {
  border-radius: 100%;
}
.page-bg-primary {
  background: #409eff !important;
  color: #ffffff;
}
.justify-between {
  justify-content: space-between !important;
}

//日历
.calendar-view {
  background: #ffffff;
  border-radius: pxtovw(20);
  margin: pxtovw(30) pxtovw(0);
}
//列表
.list-msg {
    padding: pxtovw(29) pxtovw(34);
    display: flex;
    // width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    .list-box {
      width: 32%;
      // padding: 3pxtovw(5);
      margin-bottom: pxtovw(30);
      border-radius: pxtovw(20);
      background-color: #fff;
      .list-box-top {
        padding: pxtovw(35);
        padding-bottom: 0px;
        border-top-left-radius: pxtovw(20);
        border-top-right-radius: pxtovw(20);
        background: linear-gradient(
          to top,
          #fff 0%,
          rgba(254, 144, 83, 0.1) 100%
        );
      }
      .list-box-down {
        padding: pxtovw(35);
      }
      .list-box-time {
        .uni-icons {
          margin-right: pxtovw(20);
        }
        text {
          color: #1e1b3a;
          font-size: pxtovw(30);
          font-weight: bold;
        }
      }
      .list-box-name {
        color: #333333;
        font-size: pxtovw(28);
        margin-top: pxtovw(20);
      }
      .list-box-msg {
        background-color: #f6f7f9;
        padding: pxtovw(20);
        view {
          font-size: pxtovw(26);
          color: #666666;
          margin-bottom: pxtovw(16);
        }
      }
    }
  }
</style>
